<template>
  <el-dialog
    :visible="visible"
    :append-to-body="true"
    width="800px"
    @close="$emit('update:visible', false)"
    class="c-Result"
  >
    <div class="c-Resulttitle" slot="title">
      <div class="title-content">
        <span>抽奖结果</span>
        <el-button 
          size="mini" 
          type="primary" 
          @click="exportToExcel"
          :disabled="!hasResults"
        >
          导出结果
        </el-button>
      </div>
    </div>
    <div class="container">
      <div class="item" v-for="(value, key) in result" :key="key">
        <div class="prize">{{ conversionCategoryName(key) }}</div>
        <div class="nums">
          <span
            v-for="item in value"
            :key="item"
            @click="deleteRes(key, item)"
            class="num"
            style="color: rgb(0, 165, 181);"
          >
            {{ getPersonInfo(item) }}
          </span>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import * as XLSX from 'xlsx';
import { conversionCategoryName } from '@/helper/index';

export default {
  name: 'Result',
  props: {
    visible: Boolean
  },
  computed: {
    result() {
      return this.$store.state.result;
    },
    list() {
      return this.$store.state.list;
    },
    hasResults() {
      return Object.values(this.result).some(arr => arr.length > 0);
    },
    config() {
      return this.$store.state.config;
    }
  },
  methods: {
    conversionCategoryName(key) {
      if (key === 'firstPrize') {
        return this.config.firstPrizeName || '一等奖';
      }
      return conversionCategoryName(key);
    },
    deleteRes(category, item) {
      this.$confirm('是否删除该中奖号码？删除后该号码将可以参与剩余奖项的抽奖！', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          const data = Object.assign({}, this.result);
          const index = data[category].findIndex(d => d === item);
          data[category].splice(index, 1);
          this.$store.commit('setResult', data);
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        })
        .catch(() => {});
    },
    getPersonInfo(number) {
      const person = this.list.find(item => item.key === number);
      return person ? person.name : number;
    },
    exportToExcel() {
      const exportData = [];
      
      exportData.push(['Prize', 'Number', 'Name']);
      
      Object.entries(this.result).forEach(([category, numbers]) => {
        const prizeName = conversionCategoryName(category);
        numbers.forEach(number => {
          const person = this.list.find(p => p.key === number);
          exportData.push([
            prizeName,
            number,
            person ? person.name : ''
          ]);
        });
      });
      
      const wb = XLSX.utils.book_new();
      const ws = XLSX.utils.aoa_to_sheet(exportData);
      
      ws['!cols'] = [
        { wch: 15 },
        { wch: 10 },
        { wch: 15 }
      ];
      
      XLSX.utils.book_append_sheet(wb, ws, 'LotteryResult');
      
      const date = new Date();
      const dateStr = `${date.getFullYear()}${String(date.getMonth() + 1).padStart(2, '0')}${String(date.getDate()).padStart(2, '0')}`;
      const fileName = `LotteryResult_${dateStr}.xlsx`;
      
      XLSX.writeFile(wb, fileName);
      
      this.$message.success('导出成功');
    }
  }
};
</script>

<style lang="scss">
.c-Result {
  .c-Resulttitle {
    .title-content {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-right: 40px;
      
      .el-button {
        margin-left: 15px;
      }
    }
  }
  .container {
    max-height: 500px;
    overflow-y: auto;
    .item {
      margin-bottom: 20px;
      .prize {
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 10px;
      }
      .nums {
        display: flex;
        flex-wrap: wrap;
        .num {
          padding: 5px 10px;
          border: 1px solid #ddd;
          border-radius: 4px;
          margin: 0 10px 10px 0;
          cursor: pointer;
          transition: all 0.3s;
          
          &:hover {
            background-color: #f5f7fa;
            border-color: #409EFF;
            color: #409EFF;
          }
        }
      }
    }
  }
}
</style>
